<template>
    <!-- 小程序状态栏 -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    <!-- #endif -->
    
    <!-- 平台公告组件 -->
    <platform-announcement 
      v-if="showAnnouncement" 
      :announcements="announcementList"
      @close="handleAnnouncementClose"
    />
    <view class="container">
    <!-- 模块1和搜索框的背景渐变容器 -->
    <view class="gradient-container">
      <!-- 模块1: 顶部搜索栏和LOGO部分 -->
      <view class="header">
        <view class="logo-area">
          <text class="logo">LOGO</text>
          <text class="logo-desc">您好呀好，欢迎来到xxx平台</text>
        </view>
        <view class="notification" @click="goToMessage">
          <image class="notification-icon" :src="imageUrls.xiaoxi" mode="aspectFit"></image>
          <view class="badge" v-if="unreadNoticeCount > 0">{{unreadNoticeCount}}</view>
        </view>
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <view class="search-input">
          <image class="search-icon" :src="imageUrls.sousu" mode="aspectFit"></image>
          <input type="text" placeholder="请输入商品名" v-model="homeSearchText" @focus="goToSearch" />
          <view class="search-button" @click="goToSearch">
            <text>搜索</text>
          </view>
        </view>
      </view>
      
      <!-- 模块2: 滚动图模块 -->
      <view class="banner-box">
        <swiper class="banner-swiper" circular autoplay interval="3000" duration="500" indicator-dots indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
          <swiper-item v-for="banner in banners" :key="banner.id">
            <image class="banner-image" :src="banner.img" mode="widthFix" @click="onBannerClick(banner)"></image>
          </swiper-item>
        </swiper>
      </view>
      
      <!-- 模块3: 快讯模块 -->
      <view class="notice-box">
        <view class="notice-content">
          <image class="notice-icon" :src="imageUrls.kuaishan" mode="scaleToFill"></image>
          <swiper class="notice-swiper" vertical="true" autoplay="true" circular="true" interval="3000">
            <swiper-item>
              <text class="notice-item">聚焦时代变迁的成长机会——对话中...</text>
            </swiper-item>
            <swiper-item>
              <text class="notice-item">2023年度最佳创新企业榜单发布</text>
            </swiper-item>
            <swiper-item>
              <text class="notice-item">数字化转型：传统企业的新机遇</text>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </view>
    
    <!-- 功能区和赚钱模块的父容器 -->
    <view class="features-container">
      <view class="shortcut-area">
        <view class="shortcut-item" v-for="(item, index) in shortcutItems" :key="index" @click="onShortcutClick(item)">
          <view class="shortcut-icon-wrapper">
            <image class="shortcut-icon" :src="item.icon" mode="aspectFit"></image>
          </view>
          <text class="shortcut-text">{{item.title}}</text>
        </view>
      </view>
      <!-- 模块5: 赚钱模块 -->
      <view class="earn-money-module">
        <view class="earn-money-content">
          <view class="earn-money-left">
            <view class="title-with-image">
              <text class="earn-money-title">天天来赚钱</text>
              <image class="earn-money-flow" :src="imageUrls.zhuangqian" mode="aspectFit"></image>
            </view>
            <view class="earn-money-desc">
              <text>从任务大厅</text>
              <image class="red-packet-icon" :src="imageUrls.jiedang" mode="aspectFit"></image>
              <text class="highlight-text">接单</text>
              <text> - </text>
              <image class="red-packet-icon-small" :src="imageUrls.wancheng" mode="aspectFit"></image>
              <text class="highlight-text">完成任务</text>
              <text> 即可赚取佣金</text>
            </view>
          </view>
          <view class="earn-money-right">
            <view class="earn-money-button-container">
              <view class="earn-money-button" @click="goToTasks">去接单</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 模块6: 排行榜模块 -->
    <view class="ranking-container">
      <!-- 排行榜头部背景区域 -->
      <view class="ranking-header-bg" :style="{ backgroundImage: `url(${imageUrls.paihang})` }">
        <view class="ranking-header-content">
          <view class="ranking-subtitle">
            <text>提示: 榜单每月1号刷新 </text>
            <view class="reward-text">前10名有奖</view>
          </view>
          
          <view class="ranking-tabs">
            <view 
              class="tab" 
              :class="{ active: activeTab === 'credit' }"
              :style="activeTab === 'credit' ? { backgroundImage: `url(${imageUrls.banhu})`, backgroundSize: '20%', backgroundPosition: '121.6rpx calc(100% - 16rpx)', backgroundRepeat: 'no-repeat' } : {}"
              @click="switchTab('credit')"
            >信誉榜</view>
            <view 
              class="tab" 
              :class="{ active: activeTab === 'commission' }"
              :style="activeTab === 'commission' ? { backgroundImage: `url(${imageUrls.banhu})`, backgroundSize: '20%', backgroundPosition: '121.6rpx calc(100% - 16rpx)', backgroundRepeat: 'no-repeat' } : {}"
              @click="switchTab('commission')"
            >佣金榜</view>
            <view 
              class="tab" 
              :class="{ active: activeTab === 'order' }"
              :style="activeTab === 'order' ? { backgroundImage: `url(${imageUrls.banhu})`, backgroundSize: '20%', backgroundPosition: '121.6rpx calc(100% - 16rpx)', backgroundRepeat: 'no-repeat' } : {}"
              @click="switchTab('order')"
            >抢单榜</view>
            <view 
              class="tab" 
              :class="{ active: activeTab === 'promotion' }"
              :style="activeTab === 'promotion' ? { backgroundImage: `url(${imageUrls.banhu})`, backgroundSize: '20%', backgroundPosition: '121.6rpx calc(100% - 16rpx)', backgroundRepeat: 'no-repeat' } : {}"
              @click="switchTab('promotion')"
            >推广榜</view>
            <view 
              class="tab" 
              :class="{ active: activeTab === 'wealth' }"
              :style="activeTab === 'wealth' ? { backgroundImage: `url(${imageUrls.banhu})`, backgroundSize: '20%', backgroundPosition: '121.6rpx calc(100% - 16rpx)', backgroundRepeat: 'no-repeat' } : {}"
              @click="switchTab('wealth')"
            >土豪榜</view>
          </view>
          
          <view class="ranking-date-selector" @click="showDatePicker">
            <view class="date-selector">
              <text>{{rankingData.currentMonth}}</text>
              <text class="dropdown-icon">▼</text>
            </view>
          </view>
          
          <!-- 领奖台用户 -->
          <view class="podium-users">
            <!-- 第二名 -->
            <view class="podium-user second-place">
              <view class="user-avatar-container">
                <view class="avatar-bg-container second-bg" :style="{ backgroundImage: `url(${imageUrls.erming})` }">
                  <view class="avatar-frame">
                    <image class="user-avatar" :src="rankingData.topUsers[0].avatar" mode="aspectFill"></image>
                  </view>
                </view>
                <view class="user-nickname">{{rankingData.topUsers[0].nickname}}</view>
              </view>
              <view class="user-podium">
                <view class="user-level">
                  <text class="level-label">{{ currentRankingHeader }}</text>
                  <!-- 信誉榜显示信誉等级图标 -->
                  <template v-if="activeTab === 'credit'">
                    <image v-for="(icon, index) in getLevelIcons(rankingData.topUsers[0].score)" :key="index" class="level-star" :src="icon.src" mode="aspectFit"></image>
                  </template>
                  <!-- 其他榜单显示对应数据 -->
                  <template v-else>
                    <text class="level-text">{{ formatDisplayValue(rankingData.topUsers[0], currentDataField) }}</text>
                  </template>
                </view>
                <view class="user-reward">奖励 {{rankingData.topUsers[0].reward.toFixed(2)}}</view>
              </view>
            </view>
            
            <!-- 第一名 -->
            <view class="podium-user first-place">
              <view class="user-avatar-container">
                <view class="avatar-bg-container first-bg" :style="{ backgroundImage: `url(${imageUrls.yiming})` }">
                  <view class="avatar-frame">
                    <image class="user-avatar" :src="rankingData.topUsers[1].avatar" mode="aspectFill"></image>
                  </view>
                </view>
                <view class="user-nickname">{{rankingData.topUsers[1].nickname}}</view>
              </view>
              <view class="user-podium">
                <view class="user-level">
                  <text class="level-label">{{ currentRankingHeader }}</text>
                  <!-- 信誉榜显示信誉等级图标 -->
                  <template v-if="activeTab === 'credit'">
                    <image v-for="(icon, index) in getLevelIcons(rankingData.topUsers[1].score)" :key="index" class="level-star" :src="icon.src" mode="aspectFit"></image>
                  </template>
                  <!-- 其他榜单显示对应数据 -->
                  <template v-else>
                    <text class="level-text">{{ formatDisplayValue(rankingData.topUsers[1], currentDataField) }}</text>
                  </template>
                </view>
                <view class="user-reward">奖励 {{rankingData.topUsers[1].reward.toFixed(2)}}</view>
              </view>
            </view>
            
            <!-- 第三名 -->
            <view class="podium-user third-place">
              <view class="user-avatar-container">
                <view class="avatar-bg-container third-bg" :style="{ backgroundImage: `url(${imageUrls.sanming})` }">
                  <view class="avatar-frame">
                    <image class="user-avatar" :src="rankingData.topUsers[2].avatar" mode="aspectFill"></image>
                  </view>
                </view>
                <view class="user-nickname">{{rankingData.topUsers[2].nickname}}</view>
              </view>
              <view class="user-podium">
                <view class="user-level">
                  <text class="level-label">{{ currentRankingHeader }}</text>
                  <!-- 信誉榜显示信誉等级图标 -->
                  <template v-if="activeTab === 'credit'">
                    <image v-for="(icon, index) in getLevelIcons(rankingData.topUsers[2].score)" :key="index" class="level-star" :src="icon.src" mode="aspectFit"></image>
                  </template>
                  <!-- 其他榜单显示对应数据 -->
                  <template v-else>
                    <text class="level-text">{{ formatDisplayValue(rankingData.topUsers[2], currentDataField) }}</text>
                  </template>
                </view>
                <view class="user-reward">奖励 {{rankingData.topUsers[2].reward.toFixed(2)}}</view>
              </view>
            </view>
          </view>
        </view>
        <!--  -->
      </view>
      
      <!-- 排行榜列表 -->
      <view class="ranking-list">
        <view class="ranking-list-header">
          <text class="header-rank">排名</text>
          <text class="header-user">用户</text>
          <text class="header-level">{{currentRankingHeader}}</text>
          <text class="header-reward">奖励</text>
        </view>
        <view class="ranking-list-item" v-for="user in rankingData.listUsers" :key="user.rank">
          <view class="item-rank">{{user.rank < 10 ? '0' + user.rank : user.rank}}</view>
          <view class="item-user">
            <image class="item-avatar" :src="user.avatar" mode="aspectFill"></image>
            <text class="item-nickname">{{user.nickname}}</text>
          </view>
          <view class="item-level">
            <!-- 根据榜单类型显示不同的数据 -->
            <template v-if="activeTab === 'credit'">
              <image v-for="(icon, index) in getLevelIcons(user.score)" :key="index" class="level-diamond" :src="icon.src" mode="aspectFit"></image>
            </template>
            <template v-else>
              <text class="level-text">{{formatDisplayValue(user, currentDataField)}}</text>
            </template>
          </view>
          <view class="item-reward">¥{{user.reward.toFixed(1)}}</view>
        </view>
      </view>
    </view>
    
    <!-- 模块7: 底部提示板块 -->
    <view class="bottom-tip-section">
      <view class="tip-content">
        <text class="tip-dots">········</text>
        <text class="tip-text">我也是有底线的</text>
        <text class="tip-dots">········</text>
      </view>
    </view>
    </view>
  
  <!-- 日期选择器组件 -->
  <date-picker 
    v-model:visible="datePickerVisible" 
    :initial-date="rankingData.currentMonth"
    @confirm="onDateConfirm"
  />
  <tab-bar :active="0">
  </tab-bar>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import TabBar from '../../components/TabBar.vue'
import DatePicker from '../../components/DatePicker.vue'
import PlatformAnnouncement from '../../components/PlatformAnnouncement.vue'
import { indexApi } from '@/utils/api.js'
import { userStorage } from '@/utils/storage.js'
import { getImageUrl } from '@/config/api.js'

export default {
  components: {
    'tab-bar': TabBar,
    'date-picker': DatePicker,
    'platform-announcement': PlatformAnnouncement
  },
  setup() {

// 搜索框文本
const homeSearchText = ref('')

// 未读通知数量
const unreadNoticeCount = ref(5)

// 状态栏高度
const statusBarHeight = ref(0)

// 图片URL生成 - 使用简单的路径拼接
const imageUrls = {
  // 首页图标
  xiaoxi: getImageUrl('/static/Images/index/Xiaoxi.png'),
  sousu: getImageUrl('/static/Images/index/Sousu.png'),
  kuaishan: getImageUrl('/static/Images/index/Kuaishan.png'),
  paihang: getImageUrl('/static/Images/index/Paihang.png'),
  chongzhizhongxin: getImageUrl('/static/Images/index/Chongzhizhongxin.png'),
  svip: getImageUrl('/static/Images/index/Svip.png'),
  kami: getImageUrl('/static/Images/index/Kami.png'),
  haoquan: getImageUrl('/static/Images/index/Haoquan.png'),
  fenxiao: getImageUrl('/static/Images/index/Fenxiao.png'),
  huafei: getImageUrl('/static/Images/index/Huafei.png'),
  quanyi: getImageUrl('/static/Images/index/Quanyi.png'),
  quanbao: getImageUrl('/static/Images/index/Quanbao.png'),
  gonglue: getImageUrl('/static/Images/index/Gonglue.png'),
  yaoqing: getImageUrl('/static/Images/index/YaoQing.png'),
  zhuangqian: getImageUrl('/static/Images/index/Zhuangqian.png'),
  jiedang: getImageUrl('/static/Images/index/Jiedang.png'),
  wancheng: getImageUrl('/static/Images/index/Wancheng.png'),
  banhu: getImageUrl('/static/Images/index/Banhu.png'),
  yiming: getImageUrl('/static/Images/index/Yiming.png'),
  erming: getImageUrl('/static/Images/index/Erming.png'),
  sanming: getImageUrl('/static/Images/index/Sanming.png'),
  // 通用图标
  hg: getImageUrl('/static/Images/common/HG.png'),
  zs: getImageUrl('/static/Images/common/ZS.png'),
  xx: getImageUrl('/static/Images/common/XX.png'),
  gongqiu: getImageUrl('/static/Images/common/Gongqiu.png')
}

// 轮播图数据
const banners = ref([])

// 规范化后端可能带反引号的 URL
const normalizeUrl = (url) => {
  if (typeof url !== 'string') return ''
  return url.replace(/^\s*`|`\s*$/g, '').trim()
}

const loadBanners = async () => {
  try {
   
    
    const res = await indexApi.getBannerList()
   
    
    const list = res?.data ?? res?.data?.data ?? []
    // 接口示例里有效数据在 data 数组
    const items = Array.isArray(res?.data) ? res.data : Array.isArray(res?.data?.data) ? res.data.data : []
    banners.value = items.map(item => ({
      id: item.id,
      img: normalizeUrl(item.img),
      url: item.url || ''
    })).filter(b => !!b.img)
    
   
  } catch (e) {
   
  }
}

const onBannerClick = (banner) => {
  if (!banner?.url) return
  // 简单处理：如果有 URL 则跳转外链
  // H5 下可用 window.open，uni-app 推荐使用 uni.navigateToMiniProgram/uni.navigateTo 的业务自定义
  window.open(banner.url, '_blank')
}

onMounted(() => {
  // 获取状态栏高度（仅小程序）
  // #ifdef MP-WEIXIN
  const systemInfo = uni.getSystemInfoSync()
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 状态栏高度 + 胶囊按钮高度 + 额外间距
  statusBarHeight.value = (systemInfo.statusBarHeight || 0) + (menuButtonInfo.height || 32) + 8
  // #endif
  
  // 原有初始化逻辑...
  loadBanners()
  loadRankingData('credit') // 默认加载信誉榜数据
})

// 日期选择器相关
const datePickerVisible = ref(false)

// 显示日期选择器
const showDatePicker = () => {
  datePickerVisible.value = true
}

// 排行榜标签切换
const activeTab = ref('credit') // 默认显示信誉榜

// 切换排行榜标签
const switchTab = (tabType) => {
  activeTab.value = tabType
  // 根据不同标签加载不同数据
  loadRankingData(tabType)
}

// 加载排行榜数据
const loadRankingData = (tabType) => {
  // 根据标签类型设置不同的示例数据
  const rankingDataMap = {
    credit: {
      currentMonth: '2025.03',
      topUsers: [
        {
          rank: 2,
          avatar: '/static/Images/touxiang/2.png',
          nickname: 'Sh.颜如画',
          level: 5,
          score: 120,
          reward: 3000.00,
          creditLevel: 5 // 信誉等级
        },
        {
          rank: 1,
          avatar: '/static/Images/touxiang/1.png',
          nickname: '泡芙女友',
          level: 6,
          score: 180,
          reward: 3000.00,
          creditLevel: 6 // 信誉等级
        },
        {
          rank: 3,
          avatar: '/static/Images/touxiang/3.png',
          nickname: '青杉负雪',
          level: 10,
          score: 80,
          reward: 3000.00,
          creditLevel: 10 // 信誉等级
        }
      ],
      listUsers: [
        { rank: 4, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '琉璃月车·颖儿', level: 25, score: 15000, reward: 99.8, creditLevel: 25 },
        { rank: 5, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '132****1234', level: 35, score: 25000, reward: 99.8, creditLevel: 35 },
        { rank: 6, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '舍我其谁', level: 10, score: 300, reward: 99.8, creditLevel: 10 },
        { rank: 7, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '是颖儿吖', level: 3, score: 60, reward: 99.8, creditLevel: 3 },
        { rank: 8, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '日落繁星', level: 9, score: 200, reward: 99.8, creditLevel: 9 }
      ]
    },
    commission: {
      currentMonth: '2025.03',
      topUsers: [
        {
          rank: 2,
          avatar: '/static/Images/touxiang/4.png',
          nickname: '佣金王者',
          level: 8,
          score: 350,
          reward: 5000.00,
          totalCommission: 15680.50 // 总佣金
        },
        {
          rank: 1,
          avatar: '/static/Images/touxiang/5.png',
          nickname: '赚钱达人',
          level: 9,
          score: 450,
          reward: 8000.00,
          totalCommission: 28900.80 // 总佣金
        },
        {
          rank: 3,
          avatar: '/static/Images/touxiang/6.png',
          nickname: '金币收割机',
          level: 7,
          score: 280,
          reward: 4500.00,
          totalCommission: 12350.20 // 总佣金
        }
      ],
      listUsers: [
        { rank: 4, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '佣金小能手', level: 15, reward: 2500.5, totalCommission: 8950.30 },
        { rank: 5, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '赚钱小达人', level: 12, reward: 2200.8, totalCommission: 7680.90 },
        { rank: 6, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '金币猎人', level: 18, reward: 1980.6, totalCommission: 6420.50 },
        { rank: 7, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '收益专家', level: 14, reward: 1750.2, totalCommission: 5890.70 },
        { rank: 8, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '佣金之星', level: 16, reward: 1650.9, totalCommission: 5120.40 }
      ]
    },
    order: {
      currentMonth: '2025.03',
      topUsers: [
        {
          rank: 2,
          avatar: '/static/Images/touxiang/7.png',
          nickname: '抢单高手',
          level: 6,
          reward: 1200.00,
          totalOrders: 1580 // 总抢单数量
        },
        {
          rank: 1,
          avatar: '/static/Images/touxiang/8.png',
          nickname: '闪电侠',
          level: 8,
          reward: 1500.00,
          totalOrders: 2350 // 总抢单数量
        },
        {
          rank: 3,
          avatar: '/static/Images/touxiang/9.png',
          nickname: '速度之王',
          level: 5,
          reward: 1000.00,
          totalOrders: 1280 // 总抢单数量
        }
      ],
      listUsers: [
        { rank: 4, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '抢单达人', level: 12, reward: 850.5, totalOrders: 980 },
        { rank: 5, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '快手小王', level: 10, reward: 720.8, totalOrders: 856 },
        { rank: 6, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '订单猎手', level: 15, reward: 680.6, totalOrders: 720 },
        { rank: 7, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '抢单专家', level: 8, reward: 650.2, totalOrders: 680 },
        { rank: 8, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '速度之光', level: 11, reward: 620.9, totalOrders: 620 }
      ]
    },
    promotion: {
      currentMonth: '2025.03',
      topUsers: [
        {
          rank: 2,
          avatar: '/static/Images/touxiang/10.png',
          nickname: '推广大师',
          level: 7,
          reward: 2800.00,
          promotionCount: 580 // 推广人数
        },
        {
          rank: 1,
          avatar: '/static/Images/touxiang/1.png',
          nickname: '分享达人',
          level: 9,
          reward: 3500.00,
          promotionCount: 890 // 推广人数
        },
        {
          rank: 3,
          avatar: '/static/Images/touxiang/2.png',
          nickname: '推广之星',
          level: 6,
          reward: 2200.00,
          promotionCount: 420 // 推广人数
        }
      ],
      listUsers: [
        { rank: 4, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '推广能手', level: 18, reward: 1850.5, promotionCount: 350 },
        { rank: 5, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '分享小王', level: 16, reward: 1620.8, promotionCount: 280 },
        { rank: 6, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '推广专家', level: 20, reward: 1480.6, promotionCount: 250 },
        { rank: 7, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '营销高手', level: 14, reward: 1350.2, promotionCount: 220 },
        { rank: 8, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '推广之光', level: 17, reward: 1220.9, promotionCount: 180 }
      ]
    },
    wealth: {
      currentMonth: '2025.03',
      topUsers: [
        {
          rank: 2,
          avatar: '/static/Images/touxiang/3.png',
          nickname: '土豪金',
          level: 10,
          reward: 50000.00,
          availableAmount: 158000.50 // 可用总金额
        },
        {
          rank: 1,
          avatar: '/static/Images/touxiang/4.png',
          nickname: '钻石王老五',
          level: 15,
          reward: 88888.00,
          availableAmount: 288888.80 // 可用总金额
        },
        {
          rank: 3,
          avatar: '/static/Images/touxiang/5.png',
          nickname: '富豪榜首',
          level: 12,
          reward: 38000.00,
          availableAmount: 128000.20 // 可用总金额
        }
      ],
      listUsers: [
        { rank: 4, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '财富大亨', level: 25, reward: 25000.5, availableAmount: 89500.30 },
        { rank: 5, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '金币大王', level: 22, reward: 22000.8, availableAmount: 76800.90 },
        { rank: 6, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '富豪专家', level: 28, reward: 18000.6, availableAmount: 64200.50 },
        { rank: 7, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '土豪之星', level: 20, reward: 15000.2, availableAmount: 58900.70 },
        { rank: 8, avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', nickname: '财富之光', level: 24, reward: 12000.9, availableAmount: 51200.40 }
      ]
    }
  }
  
  // 更新排行榜数据
  rankingData.value = rankingDataMap[tabType] || rankingDataMap.credit
}

// 排行榜数据
const rankingData = ref({
  currentMonth: '2025.03',
  topUsers: []
})

// 日期选择确认
const onDateConfirm = (date) => {
  rankingData.value.currentMonth = date
}

// 平台公告相关
const showAnnouncement = ref(true)
const announcementList = ref([
  '部分已支持云闪付平台',
  '优化分享体验试试把喜欢的内容分享出去吧！',
  '部分已支持云闪付平台',
  '优化分享体验试试把喜欢的内容分享出去吧！',
  '优化分享体验试试把喜欢的内容分享出去吧！',
  '优化分享体验试试把喜欢的内容分享出去吧！'
])

// 处理公告关闭
const handleAnnouncementClose = () => {
  showAnnouncement.value = false
  // 获取当前用户信息，将公告关闭状态与用户绑定
  const userInfo = uni.getStorageSync('userInfo') || {}
  const userId = userInfo.id || 'guest'
  uni.setStorageSync(`announcement_closed_${userId}`, true)
}

// 跳转到消息页面
const goToMessage = () => {
  uni.navigateTo({
    url: '/pages/notice/index'
  })
}

// 获取未读通知数量
const loadUnreadNoticeCount = async () => {
  try {
    // 获取token
    const token = userStorage.getToken() || ''
    
    // 调用getUserNoReadMsgCount接口
    const res = await indexApi.getUserNoReadMsgCount(token)
    
    // 直接使用接口返回的data值作为未读消息数量
    unreadNoticeCount.value = res?.data || 0
  } catch (error) {
    console.error('获取未读通知数量失败:', error)
    unreadNoticeCount.value = 0
  }
}

// 页面加载时检查是否需要显示公告
onMounted(() => {
  // 检查当前用户的公告关闭状态
  const userInfo = uni.getStorageSync('userInfo') || {}
  const userId = userInfo.id || 'guest'
  const announcementClosed = uni.getStorageSync(`announcement_closed_${userId}`)
  showAnnouncement.value = !announcementClosed
  
  // 加载首页菜单（替代旧的 VGS 分类）
  loadMenuList()
  
  // 加载未读通知数量
  loadUnreadNoticeCount()
})

// 其他数据可以在这里添加
// const otherData = ref({})

// 排行榜数据初始化
rankingData.value = {
  currentMonth: '2025.03',
  topUsers: [
    {
      rank: 2,
      avatar: '/static/Images/touxiang/2.png',
      nickname: 'Sh.颜如画',
      level: 5,
      reward: 3000.00
    },
    {
      rank: 1,
      avatar: '/static/Images/touxiang/1.png',
      nickname: '泡芙女友',
      level: 6,
      reward: 3000.00
    },
    {
      rank: 3,
      avatar: '/static/Images/touxiang/3.png',
      nickname: '青杉负雪',
      level: 10,
      reward: 3000.00
    }
  ],
  listUsers: [
    {
      rank: 4,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '琉璃月车·颖儿',
      level: 25,
      reward: 99.8
    },
    {
      rank: 5,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '132****1234',
      level: 35,
      reward: 99.8
    },
    {
      rank: 6,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '舍我其谁',
      level: 10,
      reward: 99.8
    },
    {
      rank: 7,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '是颖儿吖',
      level: 3,
      reward: 99.8
    },
    {
      rank: 8,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '日落繁星',
      level: 9,
      reward: 99.8
    },
    {
      rank: 9,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '我一个书生',
      level: 3,
      reward: 99.8
    },
    {
      rank: 10,
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickname: '琉璃月车·颖儿',
      level: 8,
      reward: 99.8
    }
  ]
}

// 搜索功能
const goToSearch = () => {
  uni.navigateTo({
    url: '/pages/index/search'
  })
}

// 跳转到任务页面
const goToTasks = () => {
  uni.navigateTo({
    url: '/pages/tasks/index'
  })
}

// 快捷功能区数据
const shortcutItems = ref([])

// 从首页菜单接口获取快捷功能区数据
const loadMenuList = async () => {
  try {
    const res = await indexApi.getMenuList()
    // 兼容返回结构：可能是 { code, data: [...] } 或 { list: [...] }
    const list = Array.isArray(res?.data) ? res.data : Array.isArray(res?.data?.list) ? res.data.list : Array.isArray(res?.data?.data) ? res.data.data : []
    shortcutItems.value = list.map((item, idx) => ({
      id: item.id ?? idx,
      title: item.title || item.name || item.text || '',
      // icon 字段兼容：icon/img/url 等
      icon: (item.icon || item.img || '').toString().startsWith('http') ? (item.icon || item.img) : (item.icon || item.img || ''),
      sort: parseInt(item.sort ?? idx, 10) || idx,
      status: item.status ?? '1',
      hide: item.hide ?? '0',
      link: item.url || item.link || ''
    }))
    // 过滤显示项并排序
    shortcutItems.value = shortcutItems.value
      .filter(i => `${i.status}` === '1' && `${i.hide}` === '0')
      .sort((a, b) => a.sort - b.sort)
  } catch (error) {
    console.error('获取首页功能区失败:', error)
    // 回退数据
    shortcutItems.value = [
      { title: '充值中心', icon: imageUrls.chongzhizhongxin ,url:''},
      { title: '娱乐会员', icon: imageUrls.svip ,url:''},
      { title: '卡券卡密', icon: imageUrls.kami ,url:''},
      { title: '薅券攻略', icon: imageUrls.haoquan ,url:''},
      { title: '分销中心', icon: imageUrls.fenxiao ,url:''},
      { title: '话费帮充', icon: imageUrls.huafei ,url:''},
      { title: '权益帮充', icon: imageUrls.quanyi ,url:''},
      { title: '回收卡券', icon: imageUrls.quanbao ,url:''},
      { title: '帮充攻略', icon: imageUrls.gonglue,url:'' },
      { title: '邀请好友', icon: imageUrls.yaoqing ,url:''}
    ]
  }
}

// 点击快捷功能项（如需要跳转可扩展）
const onShortcutClick = (item) => {
  if (item?.link) {
    // 简单处理外链
    if (/^https?:\/\//.test(item.link)) {
      window.open(item.link, '_blank')
    } else {
      // 内部路由
      uni.navigateTo({ url: item.link })
    }
  }
}

onMounted(() => {
  // 原有初始化逻辑...
  loadBanners()
})

// 页面加载时检查是否需要显示公告
onMounted(() => {
  // 其他逻辑...
  // 加载首页菜单
  loadMenuList()
})

// 根据积分计算图标显示
// 新规则：
// 0-10分: 1个XX.png
// 11-40分: 2个XX.png
// 41-90分: 3个XX.png
// 91-150分: 4个XX.png
// 151-250分: 5个XX.png
// 251-500分: 1个ZS.png
// 501-1000分: 2个ZS.png
// 1001-2000分: 3个ZS.png
// 2001-5000分: 4个ZS.png
// 5001-10000分: 5个ZS.png
// 10001-20000分: 1个HG.png
// 20001-50000分: 2个HG.png
// 50001-100000分: 3个HG.png
// 100001-200000分: 4个HG.png
// 200001-500000分: 5个HG.png
const getLevelIcons = (score) => {
  const icons = []
  const numScore = Number(score) || 0
  
  if (numScore < 0) return icons
  
  // 根据积分范围确定图标类型和数量
  if (numScore <= 10) {
    // 0-10分: 1个XX
    icons.push({ type: 'xx', src: imageUrls.xx })
  } else if (numScore <= 40) {
    // 11-40分: 2个XX
    for (let i = 0; i < 2; i++) {
      icons.push({ type: 'xx', src: imageUrls.xx })
    }
  } else if (numScore <= 90) {
    // 41-90分: 3个XX
    for (let i = 0; i < 3; i++) {
      icons.push({ type: 'xx', src: imageUrls.xx })
    }
  } else if (numScore <= 150) {
    // 91-150分: 4个XX
    for (let i = 0; i < 4; i++) {
      icons.push({ type: 'xx', src: imageUrls.xx })
    }
  } else if (numScore <= 250) {
    // 151-250分: 5个XX
    for (let i = 0; i < 5; i++) {
      icons.push({ type: 'xx', src: imageUrls.xx })
    }
  } else if (numScore <= 500) {
    // 251-500分: 1个ZS
    icons.push({ type: 'zs', src: imageUrls.zs })
  } else if (numScore <= 1000) {
    // 501-1000分: 2个ZS
    for (let i = 0; i < 2; i++) {
      icons.push({ type: 'zs', src: imageUrls.zs })
    }
  } else if (numScore <= 2000) {
    // 1001-2000分: 3个ZS
    for (let i = 0; i < 3; i++) {
      icons.push({ type: 'zs', src: imageUrls.zs })
    }
  } else if (numScore <= 5000) {
    // 2001-5000分: 4个ZS
    for (let i = 0; i < 4; i++) {
      icons.push({ type: 'zs', src: imageUrls.zs })
    }
  } else if (numScore <= 10000) {
    // 5001-10000分: 5个ZS
    for (let i = 0; i < 5; i++) {
      icons.push({ type: 'zs', src: imageUrls.zs })
    }
  } else if (numScore <= 20000) {
    // 10001-20000分: 1个HG
    icons.push({ type: 'hg', src: imageUrls.hg })
  } else if (numScore <= 50000) {
    // 20001-50000分: 2个HG
    for (let i = 0; i < 2; i++) {
      icons.push({ type: 'hg', src: imageUrls.hg })
    }
  } else if (numScore <= 100000) {
    // 50001-100000分: 3个HG
    for (let i = 0; i < 3; i++) {
      icons.push({ type: 'hg', src: imageUrls.hg })
    }
  } else if (numScore <= 200000) {
    // 100001-200000分: 4个HG
    for (let i = 0; i < 4; i++) {
      icons.push({ type: 'hg', src: imageUrls.hg })
    }
  } else {
    // 200001分以上: 5个HG
    for (let i = 0; i < 5; i++) {
      icons.push({ type: 'hg', src: imageUrls.hg })
    }
  }
  
  return icons
}

// 获取VGS分类数据

// 计算属性：获取当前榜单的表头标题
const currentRankingHeader = computed(() => {
  const headerMap = {
    credit: '信誉',
    commission: '佣金',
    order: '单量',
    promotion: '人数',
    wealth: '总金额'
  }
  return headerMap[activeTab.value] || '信誉'
})

// 计算属性：获取当前榜单的数据字段
const currentDataField = computed(() => {
  const fieldMap = {
    credit: 'creditLevel',
    commission: 'totalCommission',
    order: 'totalOrders',
    promotion: 'promotionCount',
    wealth: 'availableAmount'
  }
  return fieldMap[activeTab.value] || 'creditLevel'
})

// 格式化显示数据的函数
const formatDisplayValue = (user, field) => {
  const value = user[field]
  if (field === 'totalCommission' || field === 'availableAmount') {
    // 金额类型，保留两位小数
    return typeof value === 'number' ? value.toFixed(2) : '0.00'
  } else if (field === 'totalOrders' || field === 'promotionCount') {
    // 数量类型，显示整数
    return typeof value === 'number' ? value.toString() : '0'
  } else {
    // 等级类型，显示整数
    return typeof value === 'number' ? value.toString() : '0'
  }
}

return {
      homeSearchText,
      unreadNoticeCount,
      statusBarHeight,
      imageUrls,
      banners,
      normalizeUrl,
      loadBanners,
      onBannerClick,
      datePickerVisible,
      showDatePicker,
      activeTab,
      switchTab,
      loadRankingData,
      rankingData,
      onDateConfirm,
      showAnnouncement,
      announcementList,
      handleAnnouncementClose,
      goToMessage,
      loadUnreadNoticeCount,
      goToSearch,
      goToTasks,
      shortcutItems,
      loadMenuList,
      onShortcutClick,
      getLevelIcons,
      currentRankingHeader,
      currentDataField,
      formatDisplayValue
    }
  }
}
</script>

<style lang="scss">
/* 小程序状态栏样式 */
.status-bar {
  width: 100%;
  background-color: #FF7B80;
}

.container {
  min-height: auto;
  padding-bottom: 100rpx;
  background: #F4F4F4;
}

/* 渐变背景容器 */
.gradient-container {
  background: linear-gradient(180deg, #FF7B80 0%, rgba(244,234,234,0) 100%);
  border-radius: 0px 0px 0px 0px;
  padding-bottom: 20rpx;
}

/* 顶部搜索栏和LOGO部分样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  background-color: transparent;
  width: 700rpx;
  margin-left: auto;
  margin-right: auto;
}

.logo-area {
  display: flex;
  align-items: center;
}

.logo {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-right: 10rpx;
}

.logo-desc {
  font-family: 'PingFang SC', 'PingFang SC';
  font-weight: 500;
  font-size: 11px;
  color: #111111;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.notification {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50rpx;
  height: 50rpx;
  cursor: pointer;
}

.notification-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff0000;
  color: #fff;
  font-size: 20rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1;
  z-index: 10;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  padding: 10rpx 0 20rpx;
  background-color: transparent;
  width: 700rpx;
  margin-left: auto;
  margin-right: auto;
}

.search-input {
  display: flex;
  align-items: center;
  flex: 1;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  position: relative;
}

.search-input input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 28rpx;
  padding-right: 80rpx;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
}

/* 滚动图模块样式 */
.banner-box {
  padding: 0;
  margin-top: 12px;
  margin-bottom: 24rpx;
  width: 700rpx;
  margin-left: auto;
  margin-right: auto;
}

.banner-swiper {
  width: 100%;
  border-radius: 12rpx;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

/* 自定义指示点样式 */
:deep(.uni-swiper-dots-horizontal) {
  bottom: 10px;
}

:deep(.uni-swiper-dot) {
  width: 16rpx;
  height: 16rpx;
  border-radius: 8rpx;
  background-color: #FFFFFF;
  margin: 0 4rpx;
}

:deep(.uni-swiper-dot-active) {
  width: 40rpx;
  height: 16rpx;
  border-radius: 8rpx;
  background-color: #FFFFFF;
}

/* 系统公告板块样式 */
/* 快讯模块样式 */
.notice-box {
  width: 700rpx;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 10rpx;
  margin: 24rpx auto 0 auto;
  box-shadow: none;
  border: none;
  box-sizing: border-box;
}

.notice-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.notice-icon {
  width: 50px !important;
  height: 20px !important;
  margin-right: 5px;
  flex-shrink: 0;
  margin-right: 5px;
}

.notice-text-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.notice-title {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin-right: 10px;
}

.notice-swiper {
  flex: 1;
  height: 30px;
}

.notice-item {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px;
}



/* 快捷功能区样式 */
/* 功能区和赚钱模块的父容器样式 */
.features-container {
  width: 700rpx;
  margin-left: auto;
  margin-right: auto;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 1px solid #EEEEEE;
  overflow: hidden;
  margin-bottom: 10rpx;
}

.shortcut-area {
  width: 700rpx;
  margin: 24rpx auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  position: relative;
}

.shortcut-item {
  width: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10rpx;
}

.shortcut-icon-wrapper {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shortcut-icon-placeholder {
  width: 60rpx;
  height: 60rpx;
  background-color: #f0f0f0;
  border-radius: 15rpx;
}

.shortcut-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 15rpx;
}

.shortcut-text {
  font-size: 22rpx;
  color: #333;
  text-align: center;
  line-height: 1.2;
}

/* 赚钱模块样式 */
.earn-money-module {
  width: 100%;
  height: 70px;
  background: #FEF9EE;
  border-radius: 0px 0px 8px 8px;
  padding: 10rpx 20rpx;
  position: relative;
  overflow: hidden;
}

.earn-money-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.earn-money-left {
  flex: 0 0 auto;
}

.title-with-image {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.earn-money-title {
  font-size: 38.4rpx;
  font-weight: bold;
  color: #333;
  display: inline-block;
}

.earn-money-desc {
  font-size: 25.6rpx;
  color: #999;
  display: block;
}

.highlight-text {
  color: #ff4d4f;
  font-weight: bold;
}

.earn-money-flow {
  height: 70rpx;
  width: 288rpx;
  margin-left: 24rpx;
  position: relative;
  z-index: 2;
  display: inline-block;
  vertical-align: middle;
}

.earn-money-right {
  flex: 0 0 auto;
}

.earn-money-button-container {
  display: flex;
  align-items: center;
}

.earn-money-button {
  background-color: #ff4d4f;
  color: #fff;
  font-size: 21.6rpx;
  padding: 14.4rpx 28.8rpx;
  border-radius: 40rpx;
  text-align: center;
  margin-left: -160rpx;
}

/* 图标样式 */

.red-packet-icon {
  width: 24rpx;
  height: 24rpx;
  margin-left: 5rpx;
  margin-right: 0;
  vertical-align: middle;
}

.red-packet-icon-small {
  width: 28rpx;
  height: 28rpx;
  margin-left: 5rpx;
  margin-right: 0;
  vertical-align: middle;
}

.left-packet {
  left: 30%;
  top: 10rpx;
  transform: rotate(-15deg);
}

.right-packet {
  right: 10%;
  bottom: 10rpx;
  transform: rotate(15deg);
}

/* 排行榜模块样式 */
.ranking-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/* 排行榜头部样式 */
.ranking-header {
  padding: 0 40rpx;
  margin-bottom: 32rpx;
  position: absolute;
  width: 100vw;
  height: 100%;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1;
}



/* 排行榜头部背景区域 */
.ranking-header-bg {
  width: 100%;
  max-width: 750rpx;
  margin: 0 auto;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.ranking-header-content {
  position: relative;
  z-index: 2;
}

/* 排行榜标题样式 */
.ranking-subtitle {
  margin-top: 9.6rpx;
  padding-top: 144rpx;
  margin-left: 57.6rpx;
}

.ranking-subtitle text {
  color: #999999;
  font-size: 28rpx;
}

.reward-text {
  color: #E2C6AF;
  font-size: 28rpx;
  display: inline;
}

/* 排行榜标签页样式 */
.ranking-tabs {
  display: flex;
  margin-bottom: 32rpx;
  overflow-x: auto;
  white-space: nowrap;
  padding-top: 64rpx;
  max-width: 100%;
}

.tab {
  padding: 16rpx 32rpx;
  font-size: 19.2rpx;
  color: #666;
  position: relative;
  cursor: pointer;
  width: 80rpx;
  height: 20px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.tab.active {
  font-weight: bold;
  width: 96rpx;
  height: 25px;
  font-family: PingFang SC, PingFang SC;
  font-size: 18px;
  color: #000000;
  text-align: center;
  font-style: normal;
  text-transform: none;
  background-size: 20%;
  background-position: 121.6rpx calc(100% - 16rpx);
  background-repeat: no-repeat;
}

/* 日期选择器样式 */
.ranking-date-selector {
  margin-bottom: 160rpx;
  margin-left: 38.4rpx;
  width: 144rpx;
  height: 40rpx;
  background: #F9EAD8;
  border-radius: 24px 24px 24px 24px;
  border: 1px solid #EEDFCE;
  padding-left: 6rpx;
  padding-bottom: 10rpx;
}

.date-selector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6.4rpx;
  font-size: 24.8rpx;
  color: #fff;
  
}

.dropdown-icon {
  font-size: 24rpx;
  margin-left: 6.4rpx;
  color: #fff;
}

/* 领奖台用户容器 */
.podium-users {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 32rpx;
  height: 35vh;
}

/* 用户样式 */
.podium-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 224rpx;
}

.first-place {
  order: 2;
  z-index: 3;
  position: relative;
  top: -280rpx;
}

.second-place {
  order: 1;
  z-index: 2;
  margin-top: 64rpx;
  position: relative;
  top: -208rpx;
  left: 0;
}

.third-place {
  order: 3;
  z-index: 1;
  margin-top: 64rpx;
  position: relative;
  top: -208rpx;
}

/* 第一名位置调整 */
.first-place .user-avatar-container {
  position: relative;
  top: 0;
  left: 0;
}

.first-place .user-nickname {
  position: relative;
  top: -48rpx;
  left: 0;
  width: 160rpx;
  height: 48rpx;
  align-content: center;
}

.first-place .user-podium {
  position: relative;
  top: -32rpx;
  left: 0;
}

.first-place .user-level {
  position: relative;
  top: 0;
  left: 0;
}

.first-place .user-reward {
  position: relative;
  top: 3.2rpx;
  left: 0;
}

/* 第二名位置调整 */
.second-place .user-avatar-container {
  position: relative;
  top: 0;
  left: 0;
}

.second-place .user-nickname {
  width: 128rpx;
  height: 48rpx;
  align-content: center;
  position: relative;
  top: -32rpx;
  left: 0;
}

.second-place .user-podium {
  position: relative;
  top: -16rpx;
  left: 0;
}

.second-place .user-level {
  position: relative;
  top: 0;
  left: 0;
}

.second-place .user-reward {
  position: relative;
  top: 3.2rpx;
  left: 0;
}

/* 第三名位置调整 */
.third-place .user-avatar-container {
  position: relative;
  top: 0;
  left: 0;
}

.third-place .user-nickname {
  width: 128rpx;
  height: 48rpx;
  align-content: center;
  position: relative;
  top: -32rpx;
  left: 0;
}

.third-place .user-podium {
  position: relative;
  top: -16rpx;
  left: 0;
}

.third-place .user-level {
  position: relative;
  top: 0;
  left: 0;
}

.third-place .user-reward {
  position: relative;
  top: 3.2rpx;
  left: 0;
}

.crown-container {
  position: absolute;
  top: -80rpx;
  left: 50%;
  transform: translateX(-50%);
}

.crown {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-weight: bold;
  color: #fff;
  font-size: 32rpx;
}

.gold {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  box-shadow: 0 8rpx 16rpx rgba(255, 165, 0, 0.3);
}

.silver {
  background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
  box-shadow: 0 8rpx 16rpx rgba(169, 169, 169, 0.3);
}

.bronze {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  box-shadow: 0 8rpx 16rpx rgba(160, 82, 45, 0.3);
}

.user-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16rpx;
}

.avatar-frame {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  height: 160rpx;
}

.avatar-bg-container {
    position: relative;
    display: inline-block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .first-bg {
    width: 288rpx;
    height: 288rpx;
  }
  
  .second-bg {
    width: 224rpx;
    height: 224rpx;
  }
  
  .third-bg {
    width: 224rpx;
    height: 224rpx;
  }

.first-bg {
  }
  
  .second-bg {
  }
  
  .third-bg {
  }

.user-avatar {
  width: 144rpx;
  height: 144rpx;
  border-radius: 50%;
  border: 3px solid #FFD700;
  display: block;
  position: relative;
  z-index: 2;
}

.first-place .user-avatar {
  width: 144rpx;
  height: 144rpx;
}

.avatar-icon {
  position: absolute;
  bottom: -8rpx;
  right: -8rpx;
  width: 48rpx;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.first-place .avatar-icon {
  width: 64rpx;
  height: 64rpx;
  font-size: 32rpx;
  bottom: -16rpx;
  right: -16rpx;
}

.user-nickname {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
  max-width: 192rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 8rpx 16rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 32rpx;
  min-width: 96rpx;
  z-index: 4;
}

.user-podium {
  width: 224rpx;
  text-align: center;
  margin-bottom: 64rpx;
}

.user-level {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  font-size: 20rpx;
}

.level-label {
  margin-right: 8rpx;
  font-size: 22.4rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  color: #111111;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

.level-star {
  width: 32rpx;
  height: 32rpx;
  margin-left: -6.4rpx;
  display: inline-block;
}

.user-reward {
  font-weight: bold;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 25.6rpx;
  color: #E5432E;
  text-align: center;
  font-style: normal;
  text-transform: none;
}

/* 排行榜列表样式 */
.ranking-list {
  position: absolute;
  top: 924rpx;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px 20px 20px 20px;
  overflow: hidden;
  width: 752rpx;
  margin-left: auto;
  margin-right: auto;
}

.ranking-list-header {
  display: flex;
  padding: 27.2rpx 0;
  border-bottom: 2rpx solid #EEEEEE;
  font-size: 28rpx;
  color: #999;
  margin-left: 38.4rpx;
  margin-right: 64rpx;
}

.header-rank {
  flex: 0.5;
}

.header-user {
  flex: 2;
  padding-left: 32rpx;
  
}

.header-level {
  flex: 1.5;
  text-align: center;
}

.header-reward {
  flex: 1;
  text-align: right;
}

.ranking-list-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #EEEEEE;
  margin-left: 38.4rpx;
  margin-right: 64rpx;
}

.item-rank {
  flex: 0.5;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.item-user {
  flex: 2;
  display: flex;
  align-items: center;
  padding-left: 32rpx;
}

.item-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.item-nickname {
  font-size: 28rpx;
  color: #333;
  max-width: 192rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-level {
  flex: 1.5;
  text-align: center;
}

.level-diamond {
  width: 28rpx;
  height: 28rpx;
  margin: 0 2rpx;
  display: inline-block;
}

.level-text {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.item-reward {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #FF4D4F;
  font-weight: bold;
}

/* 底部提示板块样式 */
.bottom-tip-section {
  width: 752rpx;
  margin-left: auto;
  margin-right: auto;
  min-height: 128rpx;
  padding: 64rpx 32rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa;
  margin-top: 544rpx;
  box-sizing: border-box;
}

.tip-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  width: 100%;
  max-width: 640rpx;
}

.tip-dots {
  font-size: 24rpx;
  color: #cccccc;
  letter-spacing: 3.2rpx;
  flex-shrink: 0;
}

.tip-text {
  font-size: 28rpx;
  color: #999999;
  padding: 0 16rpx;
  white-space: nowrap;
  text-align: center;
}

</style>